<template>
  <div class="linkMan" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;color: #46d0ca;" title="常用联系人" left-text=""
        left-arrow>
        <div slot="right" style="color: #46d0ca;" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div v-show="datalist.length == 0"  class="wudingdan" >
        <van-icon name="description"/>
        <p>亲,暂无联系人资料！</p>
    </div>
    <div v-show="datalist.length != 0" class="content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="PassengerList">
      <div class="item" v-for="(itme,index) in datalist" :key='index'>
        <p class="info_name">
          <span>{{itme.RealName}}</span>
          <span>{{itme.Mobile}}</span>
        </p>
        <p class="idcard">{{itme.IDCardNo}}</p>
        <div class="tips">
          <van-radio-group v-model="radio">
            <van-radio :name="itme.piSN" @click="BookSetDefault(itme.piSN)">默认地址</van-radio>
          </van-radio-group>
          <div class="right">
            <div class="right_item" @click="Editdata(itme.RealName,itme.Mobile,itme.IDCardNo,itme.piSN)">
              <van-icon size="17px" style="margin-right: 0.1875rem;" name="records" />
              <span>编辑</span>
            </div>
            <div class="right_item" @click="Deletedata(itme.piSN)">
              <van-icon size="17px" style="margin-right: 0.1875rem;" name="delete" />
              <span>删除</span>
            </div>
          </div>
        </div>
      </div>
       </van-list>
    </div>

    <div class="bottom">
      <div class="bottom_btn" @click="editLinkMan">添加联系人</div>
    </div>
    <div style="width: 100%;height: 100px;"></div>
  </div>
</template>

<script>
  import {
    PassengerList,
    PassengerDo
  } from '@/api/home.js'

  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        // checked: false,
        datalist: [],
        radio: '',
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        totalPage: 0,
        pageNumber: 0, //自定义一个变量
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      this.PassengerList()
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      editLinkMan() { //跳转增加联系人
        this.$router.push({
          path: "/Home/editLinkManA",
        })
      },
      PassengerList() { //请求联系人列表数据
        let data = {
          "PageNo": this.pageNumber + 1,
        }
        PassengerList(data).then(res => {
          // console.log(res);
          this.totalPage = res.PageCount;
          if (res.List.length > 0) {
            this.datalist = this.datalist.concat(res.List);
          } else {
            this.datalist = res.List
          }
          // this.datalist = res.List
          this.datalist.forEach((v,i)=>{
            if(v.IsDefault == true){
              this.radio = v.piSN
              // console.log(this.radio)
            }
          })
          this.loading = false;
          this.pageNumber++;
          if (this.pageNumber >= this.totalPage) {
            this.finished = true;
          }
        })
      },
      Deletedata(piSN) { //删除联系人
        let data = {
          DoType: 'Delete',
          piSN: piSN,
        }
        this.$dialog.confirm({
          // title: '标题',
          message: '确定删除',
          confirmButtonColor:'#46d0ca'
        }).then(() => {
          // on confirm
          PassengerDo(data).then(res => {
            // console.log(res)
            this.datalist = []
            this.pageNumber = 0;
             this.PassengerList();
            this.$forceUpdate();
          })
        }).catch(() => {
          // on cancel
        });
      },
      Editdata(name,phone,IDCardNo,piSN){//修改跳转
        this.$router.push({
          path: "/Home/editLinkManA",
          query:{
            name:name,
            phone:phone,
            IDCardNo:IDCardNo,
            piSN:piSN,
            type:'Edit',
          }
        })
      },
      BookSetDefault(value){//点击设置默认地址
        this.radio= value
        console.log(value)
        let data = {
          DoType: 'SetDefault',
          piSN: value,
        }
        PassengerDo(data).then(res => {
          console.log(res)
          // this.$toast('删除成功');
          // this.PassengerList();
        })

      },
    }
  }
</script>

<style lang="scss">
  .linkMan {
    .bj {
      .van-icon {
        color: white !important;

      }
    }

    .content {
      .item {
        background: #FFFFFF;
        font-size: 12px;
        margin-bottom: 0.625rem;

        .info_name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.625rem;
          padding-top: 0.9375rem;
          font-size: 14px;
          line-height: 0.9375rem;
          color: #5c5c5c;
        }

        .idcard {
          color: #5C5C5C;
          padding: 0 0.625rem;
          padding-bottom: 0.625rem;
          line-height: 1rem;
          border-bottom: 0.0625rem solid #d9d9d9;
        }

        .tips {
          height: 2.625rem;
          display: flex;
          justify-content: space-between;
          margin: 0 0.625rem;
          align-items: center;
          span{
            color: #5c5c5c;
          }
          .right {
            display: flex;
            align-items: center;

            .right_item {
              display: flex;
              // align-items: center;
              margin-left: 0.1875rem;
            }
          }

          .van-radio-group {
            .van-icon {
              color: white !important;
              font-size: 16px !important;
            }
            .van-radio__icon--checked{
              .van-icon{
                background-color: #46d0ca !important;
                border-color: #46d0ca !important;
              }

            }
          }

        }
      }

    }

    .bottom {
      height: 60px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;

      .bottom_btn {
        width: 90%;
        background: #46d0ca;
        text-align: center;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        margin: 0.75rem 0.625rem;
        border-radius: 30px;
        color: white;
      }
    }
  }
</style>
